<template>
  <div>
    <div class="k-spreadsheet-toolbar-header">
      <k-button style="margin-bottom:5px" :icon="'save'" :class="'k-primary'" @click="save">保存</k-button>
      <k-button style="margin-bottom:5px" :icon="'excel'" :class="'k-primary'" @click="exportExcel">导出Excel</k-button>
    </div>

    <spreadsheet
      v-if="visibleSpreadsheet"
      ref="spreadsheet"
      :columns="20"
      :rows="100"
      :toolbar="true"
      :sheetsbar="false"
      :excel-file-name="fileName"
      :excel-export="function(e){

      }"
    >
      <spreadsheet-sheet
        :name="'工作周报'"
        :data-source="datasource"
        :rows="rows"
        :columns="columns"
        :merged-cells="mergedCells"
      />
    </spreadsheet>
  </div>
</template>

<script>
  import { Button } from '@progress/kendo-buttons-vue-wrapper'
  import { Spreadsheet, SpreadsheetSheet } from '@progress/kendo-spreadsheet-vue-wrapper'
  import JSZip from 'jszip'
  window.JSZip = JSZip
  export default {
    name: 'PrjmemberWeekly',
    components: {
      'spreadsheet': Spreadsheet,
      'spreadsheet-sheet': SpreadsheetSheet,
      'k-button': Button
    },
    data: function() {
      return {
        fileName: '',
        mergedCells: [],
        dialogName: this.$attrs ? (this.$attrs.data ? (this.$attrs.data.dialogName ? this.$attrs.data.dialogName : '') : '') : '',
        visibleSpreadsheet: false,
        rows: [],
        columns: [
          { width: 35 },
          { width: 120 },
          { width: 315 },
          { width: 100 },
          { width: 100 },
          { width: 100 },
          { width: 100 },
          { width: 400 }
        ],
        datasource: {}
      }
    },
    mounted: function() {
      this.initSpreadsheetStyles().then(_ => {
        this.visibleSpreadsheet = true
        this.$nextTick(() => {
          const spreadsheet = this.$refs.spreadsheet.kendoWidget()
          this.hideRow(spreadsheet, '0')
          this.hideColumn(spreadsheet, '8,9,10,11,12,13,14,15,16,17,18,19')
          spreadsheet.element.css('height', '550px')
          spreadsheet.element.css('width', '100%')
          spreadsheet.resize()
          const operatorType = this.$attrs.data.operatorType
          // 获取参数
          const that_ = this
          if (operatorType === 'add') {
            // 初始化周报数据
            this.$post('/service/prjMng/prjMemberMng/weekly/initPrjMemberWeeklyContent', this.$attrs.data.param).then(res => {
              if (res.code !== 200) {
                this.$KendoNotify({
                  title: '错误信息:' + res.code,
                  message: res.message
                }, 'error')
              } else {
                const dataSource = {
                  transport: {
                    read: function(options) {
                      // eslint-disable-next-line no-undef
                      that_.$post('/service/prjMng/prjMemberMng/weekly/findPrjMemberWeeklyList', res.data).then(res => {
                        if (res.code !== 200) {
                          that_.$KendoNotify({
                            title: '错误信息:' + res.code,
                            message: res.message
                          }, 'error')
                        } else {
                          options.success(res.data)
                        }
                      })
                    },
                    submit: function(e) {
                      // eslint-disable-next-line no-undef
                      that_.$post('/service/prjMng/prjMemberMng/weekly/updatePrjMemberWeekly', { models: JSON.stringify(e.data.updated) }).then(res => {
                        if (res.code !== 200) {
                          that_.$KendoNotify({
                            title: '错误信息:' + res.code,
                            message: res.message
                          }, 'error')
                        } else {
                          that_.$KendoNotify({
                            title: '提示信息:' + res.code,
                            message: res.message
                          }, 'success')
                          e.success(res.data, 'update')
                          that_.$bus.emit('dialog' + `${that_.dialogName}`, true)
                        }
                      })
                    }
                  },
                  batch: true,
                  schema: {
                    model: {
                      id: 'id',
                      fields: {
                        arg1: { type: 'string' },
                        arg2: { type: 'string' },
                        arg3: { type: 'string' },
                        arg4: { type: 'string' },
                        arg5: { type: 'string' },
                        arg6: { },
                        arg7: { type: 'string' },
                        arg8: { type: 'string' },
                        id: { type: 'string' },
                        argType: { type: 'string' }
                      }
                    }
                  }
                }
                spreadsheet.sheetByIndex(0).setDataSource(dataSource)
              }
            })
          } else if (operatorType === 'edit') {
            const param = this.$attrs.data.param
            const dataSource = {
              transport: {
                read: function(options) {
                  // eslint-disable-next-line no-undef
                  that_.$post('/service/prjMng/prjMemberMng/weekly/findPrjMemberWeeklyList', param).then(res => {
                    if (res.code !== 200) {
                      that_.$KendoNotify({
                        title: '错误信息:' + res.code,
                        message: res.message
                      }, 'error')
                    } else {
                      options.success(res.data)
                    }
                  })
                },
                submit: function(e) {
                  that_.$post('/service/prjMng/prjMemberMng/weekly/updatePrjMemberWeekly', { models: JSON.stringify(e.data.updated) }).then(res => {
                    if (res.code !== 200) {
                      that_.$KendoNotify({
                        title: '错误信息:' + res.code,
                        message: res.message
                      }, 'error')
                    } else {
                      that_.$KendoNotify({
                        title: '提示信息:' + res.code,
                        message: res.message
                      }, 'success')
                      e.success(res.data, 'update')
                      that_.$bus.emit('dialog' + `${that_.dialogName}`, true)
                    }
                  })
                }
              },
              batch: true,
              schema: {
                model: {
                  id: 'id',
                  fields: {
                    arg1: { type: 'string' },
                    arg2: { type: 'string' },
                    arg3: { type: 'string' },
                    arg4: { type: 'string' },
                    arg5: { type: 'string' },
                    arg6: { },
                    arg7: { type: 'string' },
                    arg8: { type: 'string' },
                    id: { type: 'string' },
                    argType: { type: 'string' }

                  }
                }
              }
            }
            spreadsheet.sheetByIndex(0).setDataSource(dataSource)
          }
        })
      })
    },
    methods: {
      hideRow(spreadsheet, rows) {
        rows.split(',').forEach(str => {
          spreadsheet.sheetByIndex(0).hideRow(Number(str))
        })
      },
      hideColumn(spreadsheet, columns) {
        columns.split(',').forEach(str => {
          spreadsheet.sheetByIndex(0).hideColumn(Number(str))
        })
      },
      async initSpreadsheetStyles() {
        let initParamData = this.$attrs.data.param
        if (!initParamData || Object.keys(initParamData).length < 0) {
          initParamData = {}
        }
        await this.$post('/service/prjMng/prjMemberMng/weekly/initPrjMemberWeeklyFormat', initParamData).then(res => {
          if (res.code !== 200) {
            this.$KendoNotify({
              title: '错误信息:' + res.code,
              message: res.message
            }, 'error')
            this.rows = []
          } else {
            this.rows = res.data.list
            this.mergedCells = res.data.mergedCells
            this.fileName = `天阳科技周报-${res.data.userName}-${res.data.startDate}-${res.data.endDate}.xlsx`
          }
        })
      },
      save() {
        const spreadsheet = this.$refs.spreadsheet.kendoWidget()
        // eslint-disable-next-line no-undef
        spreadsheet.sheetByIndex(0).dataSource.sync()
      },
      exportExcel() {
        const spreadsheet = this.$refs.spreadsheet.kendoWidget()
        spreadsheet.saveAsExcel(spreadsheet.options)
      }
    }
  }
</script>

<style>
    .k-spreadsheet-toolbar-header>button:not(:first-child){
    margin-left: 10px;
  }
</style>
